<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Calendar</h1>
        <p>Calendar is an input component to select a date.</p>
    </div>
    <app-inputStyleSwitch></app-inputStyleSwitch>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Popup</h5>
        <div class="p-fluid p-grid p-formgrid">
            <div class="p-field p-col-12 p-md-4">
                <label for="basic">Basic</label>
                <p-calendar inputId="basic" [(ngModel)]="date1"></p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="spanish">Spanish</label>
                <p-calendar [(ngModel)]="date2" [locale]="es" dateFormat="dd/mm/yy" inputId="spanish"></p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="icon">Icon</label>
                <p-calendar [(ngModel)]="date3" [showIcon]="true" inputId="icon"></p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="min-max">Min-Max</label>
                <p-calendar [(ngModel)]="date4" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true" inputId="min-max"></p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="disabledays">Disable Days</label>
                <p-calendar [(ngModel)]="date5" [disabledDates]="invalidDates" [disabledDays]="[0,6]" [readonlyInput]="true" inputId="disabledays"></p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="navigators">Navigators</label>
                <p-calendar [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" inputId="navigators"></p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="time">Time</label>
                <p-calendar [(ngModel)]="date7" [showTime]="true" inputId="time"></p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="timeonly">Time Only</label>
                <p-calendar [(ngModel)]="date8" [timeOnly]="true" inputId="timeonly"></p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="multiple">Multiple</label>
                <p-calendar [(ngModel)]="dates" selectionMode="multiple" [readonlyInput]="true" inputId="multiple"></p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="range">Range</label>
                <p-calendar [(ngModel)]="rangeDates" selectionMode="range" [readonlyInput]="true" inputId="range"></p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="buttonbar">Button Bar</label>
                <p-calendar [(ngModel)]="date9" showButtonBar="true" inputId="buttonbar"></p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="template">Date Template</label>
                <p-calendar [(ngModel)]="date10" inputId="template">
                    <ng-template pTemplate="date" let-date>
                        <span [ngStyle]="{textDecoration: (date.day < 21 && date.day > 10) ? 'line-through' : 'inherit'}">{{date.day}}</span>
                    </ng-template>
                </p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="multiplemonths">Multiple Months</label>
                <p-calendar [(ngModel)]="date11" [numberOfMonths]="3" inputId="multiplemonths"></p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="monthpicker">Month Picker</label>
                <p-calendar [(ngModel)]="date12" view="month" dateFormat="mm/yy" [yearNavigator]="true" yearRange="2000:2030" [readonlyInput]="true" inputId="monthpicker"></p-calendar>
            </div>

            <div class="p-field p-col-12 p-md-4">
                <label for="touchui">Touch UI</label>
                <p-calendar [(ngModel)]="date13" [touchUI]="true" [readonlyInput]="true" inputId="touchui"></p-calendar>
            </div>
        </div>

        <h5>Inline</h5>
        <p-calendar [(ngModel)]="date14" [inline]="true" [showWeek]="true"></p-calendar>
    </div>

</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;CalendarModule&#125; from 'primeng/calendar';
</app-code>

            <h5>Getting Started</h5>
            <p>Two-way value binding is defined using the standard ngModel directive referencing to a Date property.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="value"&gt;&lt;/p-calendar&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class MyModel &#123;

    value: Date;

&#125;
</app-code>

            <h5>Model Driven Forms</h5>
            <p>Calendar can be used in a model driven form as well.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar formControlName="date"&gt;&lt;/p-calendar&gt;
</app-code>

            <h5>Popup and Inline</h5>
            <p>Calendar is displayed in a <i>popup</i> by default and <i>inline</i> property needs to be enabled for inline mode.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="value" [inline]="true"&gt;&lt;/p-calendar&gt;
</app-code>

            <h5>Selection Mode</h5>
            <p>By default calendar allows selecting one date and multiple dates can be selected by setting selectionMode to multiple. In this
            case calendar updates the value with an array of dates where optionally number of selectable dates can be restricted with maxDateCount property.
            Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value
            is the end date.</p>

            <h5>DateFormat</h5>
            <p>Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at locale settings. Note that standalone property overrides the value in locale settings.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="dateValue" dateFormat="dd.mm.yy"&gt;&lt;/p-calendar&gt;
</app-code>

            <p>Following options can be a part of the format.</p>
            <ul>
    			<li>d - day of month (no leading zero)</li>
    			<li>dd - day of month (two digit)</li>
    			<li>o - day of the year (no leading zeros)</li>
    			<li>oo - day of the year (three digit)</li>
    			<li>D - day name short</li>
    			<li>DD - day name long</li>
    			<li>m - month of year (no leading zero)</li>
    			<li>mm - month of year (two digit)</li>
    			<li>M - month name short</li>
    			<li>MM - month name long</li>
    			<li>y - year (two digit)</li>
    			<li>yy - year (four digit)</li>
    			<li>@ - Unix timestamp (ms since 01/01/1970)</li>
    			<li> ! - Windows ticks (100ns since 01/01/0001)</li>
    			<li>'...' - literal text</li>
    			<li>'' - single quote</li>
    			<li>anything else - literal text</li>
		    </ul>

            <h5>Time</h5>
            <p>TimePicker is enabled with  <i>showTime</i> property and 24 (default) or 12 hour mode is configured using <i>hourFormat</i> option.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="value" showTime="true" hourFormat="12"&gt;&lt;/p-calendar&gt;
&lt;p-calendar [(ngModel)]="value" showTime="true" hourFormat="24"&gt;&lt;/p-calendar&gt;
</app-code>

            <h5>Date Restriction</h5>
            <p>To disable entering dates manually, set <i>readonlyInput</i> to true and to restrict selectable dates use <i>minDate</i>
                and <i>maxDate</i> options.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="dateValue" [minDate]="minDateValue" [maxDate]="maxDateValue" [readonlyInput]="true"&gt;&lt;/p-calendar&gt;
</app-code>

            <h5>Disable specific dates and/or days</h5>
            <p>To disable specific dates or days, set readonlyInput to true and to restrict selectable dates use <i>disabledDates</i> and/or <i>disabledDays</i> options.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="dateValue" [disabledDates]="invalidDates" [disabledDays]="[0,6]" [readonlyInput]="true"&gt;&lt;/p-calendar&gt;
</app-code>

            <h5>Button Bar</h5>
            <p>Button bar displays today and clear buttons and enabled using <i>showButtonBar</i> property.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="dateValue" showButtonBar="true"&gt;&lt;/p-calendar&gt;
</app-code>

            <h5>Multiple Months</h5>
            <p>Displaying multiple months is enabled by setting <i>numberOfMonths</i> property to a value greater than 1.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="dateValue" [numberOfMonths]="3"&gt;&lt;/p-calendar&gt;
</app-code>

            <h5>Localization</h5>
            <p>Localization for different languages and formats is defined by binding the locale settings object to the <i>locale</i> property. Following is the default values for English.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="dateValue" [locale]="en"&gt;&lt;/p-calendar&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class MyModel &#123;

    en: any;

    ngOnInit() &#123;
        this.en = &#123;
            firstDayOfWeek: 0,
            dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
            dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
            monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
            monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
            today: 'Today',
            clear: 'Clear',
            dateFormat: 'mm/dd/yy',
            weekHeader: 'Wk'
        &#125;;
    &#125;
&#125;
</app-code>

            <h5>Custom Content</h5>
            <p>Calendar UI accepts custom content using p-header and p-footer components.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="dateValue"&gt;
    &lt;p-header&gt;Header&lt;/p-header&gt;
    &lt;p-footer&gt;Footer&lt;/p-footer&gt;
&lt;/p-calendar&gt;
</app-code>

            <p>Cell contents can also be templated using an ng-template with a pTemplate directive whose value is "date". This is a handy feature to highlight specific dates. Note that the implicit
            variable passed to the template is not a date instance but a metadata object to represent a Date with "day", "month" and "year" properties. Example below
            changes the background color of dates between 10th and 21st of each month. </p>
            <p>In addition, "disabledDateTemplate" is provided in case you need to customize the content of disabled dates as well.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="date10"&gt;
    &lt;ng-template pTemplate="date" let-date&gt;
        &lt;span [ngStyle]="&#123;textDecoration: (date.day &lt; 21 && date.day &gt; 10) ? 'line-through' : 'inherit'&#125;"&gt;{{date.day}}&lt;/span&gt;
    &lt;/ng-template&gt;
&lt;/p-calendar&gt;
</app-code>

            <h5>Month Picker</h5>
            <p>Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="dateValue" view="month" dateFormat="mm/yy" [yearNavigator]="true" yearRange="2000:2030"&gt;&lt;/p-calendar&gt;
</app-code>

            <h5>Touch UI</h5>
            <p>
                Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices. 
                When using Touch UI mode you will typically want to set readonlyInput to prevent keyboard popup for mobile users.
            </p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="dateValue" [touchUI]="true" [readonlyInput]="true"&gt;&lt;/p-calendar&gt;
</app-code>

            <h5>Animation Configuration</h5>
            <p>Transition of the open and hide animations can be customized using the <i>showTransitionOptions</i> and <i>hideTransitionOptions</i> properties, 
                example below disables the animations altogether.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-calendar [(ngModel)]="dateValue" [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'"&gt;&lt;/p-calendar&gt;
</app-code>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>defaultDate</td>
                            <td>Date</td>
                            <td>null</td>
                            <td>Set the date to highlight on first opening if the field is blank.</td>
                        </tr>
                        <tr>
                            <td>selectionMode</td>
                            <td>string</td>
                            <td>single</td>
                            <td>Defines the quantity of the selection, valid values are "single", "multiple" and "range".</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>inputStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the input field.</td>
                        </tr>
                        <tr>
                            <td>inputStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the input field.</td>
                        </tr>
                        <tr>
                            <td>inputId</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Identifier of the focus input to match a label defined for the component.</td>
                        </tr>
                        <tr>
                            <td>name</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Name of the input element.</td>
                        </tr>
                        <tr>
                            <td>placeholder</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Placeholder text for the input.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When specified, disables the component.</td>
                        </tr>
                        <tr>
                            <td>dateFormat</td>
                            <td>string</td>
                            <td>mm/dd/yy</td>
                            <td>Format of the date which can also be defined at locale settings.</td>
                        </tr>
                        <tr>
                            <td>inline</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, displays the calendar as inline. Default is false for popup mode.</td>
                        </tr>
                        <tr>
                            <td>showOtherMonths</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.</td>
                        </tr>
                        <tr>
                            <td>selectOtherMonths</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.</td>
                        </tr>
                        <tr>
                            <td>showIcon</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, displays a button with icon next to input.</td>
                        </tr>
                         <tr>
                            <td>showOnFocus</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>When disabled, datepicker will not be visible with input focus.</td>
                        </tr>
                        <tr>
                            <td>showWeek</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, calendar will show week numbers.</td>
                        </tr>
                        <tr>
                            <td>icon</td>
                            <td>string</td>
                            <td>pi pi-calendar</td>
                            <td>Icon of the calendar button.</td>
                        </tr>
                        <tr>
                            <td>appendTo</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).</td>
                        </tr>
                        <tr>
                            <td>readonlyInput</td>
                            <td>boolean</td>
                            <td>null</td>
                            <td>When specified, prevents entering the date manually with keyboard.</td>
                        </tr>
                        <tr>
                            <td>shortYearCutoff</td>
                            <td>string</td>
                            <td>+10</td>
                            <td>The cutoff year for determining the century for a date.</td>
                        </tr>
                        <tr>
                            <td>minDate</td>
                            <td>Date</td>
                            <td>null</td>
                            <td>The minimum selectable date.</td>
                        </tr>
                        <tr>
                            <td>maxDate</td>
                            <td>Date</td>
                            <td>null</td>
                            <td>The maximum selectable date.</td>
                        </tr>
                        <tr>
                            <td>disabledDates</td>
                            <td>Array&lt;Date&gt;</td>
                            <td>null</td>
                            <td>Array with dates that should be disabled (not selectable).</td>
                        </tr>
                        <tr>
                            <td>disabledDays</td>
                            <td>Array&lt;number&gt;</td>
                            <td>null</td>
                            <td>Array with weekday numbers that should be disabled (not selectable).</td>
                        </tr>
                        <tr>
                            <td>monthNavigator</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether the month should be rendered as a dropdown instead of text.</td>
                        </tr>
                        <tr>
                            <td>yearNavigator</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether the year should be rendered as a dropdown instead of text.</td>
                        </tr>
                        <tr>
                            <td>yearRange</td>
                            <td>string</td>
                            <td>null</td>
                            <td>The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).</td>
                        </tr>
                        <tr>
                            <td>showTime</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to display timepicker.</td>
                        </tr>
                        <tr>
                            <td>hourFormat</td>
                            <td>string</td>
                            <td>24</td>
                            <td>Specifies 12 or 24 hour format.</td>
                        </tr>
                        <tr>
                            <td>locale</td>
                            <td>object</td>
                            <td>null</td>
                            <td>An object having regional configuration properties for the calendar.</td>
                        </tr>
                        <tr>
                            <td>timeOnly</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to display timepicker only.</td>
                        </tr>
                        <tr>
                            <td>timeSeparator</td>
                            <td>string</td>
                            <td>:</td>
                            <td>Separator of time selector.</td>
                        </tr>
                        <tr>
                            <td>dataType</td>
                            <td>string</td>
                            <td>date</td>
                            <td>Type of the value to write back to ngModel, default is date and alternative is string.</td>
                        </tr>
                        <tr>
                            <td>required</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
                        </tr>
                        <tr>
                            <td>tabindex</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Index of the element in tabbing order.</td>
                        </tr>
                        <tr>
                            <td>ariaLabelledBy</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
                        </tr>
                        <tr>
                            <td>showSeconds</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to show the seconds in time picker.</td>
                        </tr>
                        <tr>
                            <td>stepHour</td>
                            <td>number</td>
                            <td>1</td>
                            <td>Hours to change per step.</td>
                        </tr>
                        <tr>
                            <td>stepMinute</td>
                            <td>number</td>
                            <td>1</td>
                            <td>Minutes to change per step.</td>
                        </tr>
                        <tr>
                            <td>stepSecond</td>
                            <td>number</td>
                            <td>1</td>
                            <td>Seconds to change per step.</td>
                        </tr>
                        <tr>
                            <td>maxDateCount</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Maximum number of selectable dates in multiple mode.</td>
                        </tr>
                        <tr>
                            <td>showButtonBar</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to display today and clear buttons at the footer</td>
                        </tr>
                        <tr>
                            <td>todayButtonStyleClass</td>
                            <td>string</td>
                            <td>p-secondary-button</td>
                            <td>Style class of the today button.</td>
                        </tr>
                        <tr>
                            <td>clearButtonStyleClass</td>
                            <td>string</td>
                            <td>p-secondary-button</td>
                            <td>Style class of the clear button.</td>
                        </tr>
                        <tr>
                            <td>baseZIndex</td>
                            <td>number</td>
                            <td>0</td>
                            <td>Base zIndex value to use in layering.</td>
                        </tr>
                        <tr>
                            <td>autoZIndex</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to automatically manage layering.</td>
                        </tr>
                        <tr>
                            <td>panelStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the datetimepicker container element.</td>
                        </tr>
                        <tr>
                            <td>panelStyle</td>
                            <td>object</td>
                            <td>null</td>
                            <td>Inline style of the datetimepicker container element.</td>
                        </tr>
                        <tr>
                            <td>keepInvalid</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Keep invalid value when input blur.</td>
                        </tr>
                        <tr>
                            <td>hideOnDateTimeSelect</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to hide the overlay on date selection.</td>
                        </tr>
                        <tr>
                            <td>numberOfMonths</td>
                            <td>number</td>
                            <td>1</td>
                            <td>Number of months to display.</td>
                        </tr>
                        <tr>
                            <td>view</td>
                            <td>string</td>
                            <td>date</td>
                            <td>Type of view to display, valid values are "date" for datepicker and "month" for month picker.</td>
                        </tr>
                        <tr>
                            <td>multipleSeparator</td>
                            <td>string</td>
                            <td>,</td>
                            <td>Separator for multiple selection mode.</td>
                        </tr>
                        <tr>
                            <td>rangeSeparator</td>
                            <td>string</td>
                            <td>-</td>
                            <td>Separator for joining start and end dates on range selection mode.</td>
                        </tr>
                        <tr>
                            <td>touchUI</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, calendar overlay is displayed as optimized for touch devices.</td>
                        </tr>
                        <tr>
                            <td>focusTrap</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>When enabled, can only focus on elements inside the calendar.</td>
                        </tr>
                        <tr>
                            <td>showTransitionOptions</td>
                            <td>string</td>
                            <td>.12s cubic-bezier(0, 0, 0.2, 1)</td>
                            <td>Transition options of the show animation.</td>
                        </tr>
                        <tr>
                            <td>hideTransitionOptions</td>
                            <td>string</td>
                            <td>.1s linear</td>
                            <td>Transition options of the hide animation.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onSelect</td>
                            <td>value: Selected value
                            </td>
                            <td>Callback to invoke when a date is selected. Note that this event is not called when
                                the value is entered from the input manually.
                            </td>
                        </tr>
                        <tr>
                            <td>onBlur</td>
                            <td>event: Blur event
                            </td>
                            <td>Callback to invoke on blur of input field.</td>
                        </tr>
                        <tr>
                            <td>onFocus</td>
                            <td>event: Focus event
                            </td>
                            <td>Callback to invoke on focus of input field.</td>
                        </tr>
                        <tr>
                            <td>onClose</td>
                            <td>event: Close event
                            </td>
                            <td>Callback to invoke when datepicker panel is closed.</td>
                        </tr>
                        <tr>
                            <td>onShow</td>
                            <td>event: Animation event</td>
                            <td>Callback to invoke when datepicker panel is visible.</td>
                        </tr>
                        <tr>
                            <td>onClickOutside</td>
                            <td>event: Click event
                            </td>
                            <td>Callback to invoke when click outside of datepicker panel.</td>
                        </tr>
                        <tr>
                            <td>onInput</td>
                            <td>event: Input event
                            </td>
                            <td>Callback to invoke when input field is being typed.</td>
                        </tr>
                        <tr>
                            <td>onTodayClick</td>
                            <td>event: Click event
                            </td>
                            <td>Callback to invoke when today button is clicked.</td>
                        </tr>
                        <tr>
                            <td>onClearClick</td>
                            <td>event: Click event
                            </td>
                            <td>Callback to invoke when clear button is clicked.</td>
                        </tr>
                        <tr>
                            <td>onMonthChange</td>
                            <td>event.month: New month <br />
                                event.year: New year
                            </td>
                            <td>Callback to invoke when a month is changed using the navigators.</td>
                        </tr>
                        <tr>
                            <td>onYearChange</td>
                            <td>event.month: New month <br />
                                event.year: New year
                            </td>
                            <td>Callback to invoke when a year is changed using the navigators.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Methods</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>toggle</td>
                            <td>-</td>
                            <td>Toggles the visibility of the calendar.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-calendar</td>
                            <td>Main container element</td>
                        </tr>
                        <tr>
                            <td>p-calendar-w-btn</td>
                            <td>Main container element when button is enabled.</td>
                        </tr>
                        <tr>
                            <td>p-calendar-timeonly</td>
                            <td>Main container element in time picker only mode.</td>
                        </tr>
                        <tr>
                            <td>p-inputtext</td>
                            <td>Input element</td>
                        </tr>
                        <tr>
                            <td>p-datepicker</td>
                            <td>Datepicker element</td>
                        </tr>
                        <tr>
                            <td>p-datepicker-inline</td>
                            <td>Datepicker element in inline mode</td>
                        </tr>
                        <tr>
                            <td>p-datepicker-monthpicker</td>
                            <td>Datepicker element in month view.</td>
                        </tr>
                        <tr>
                            <td>p-datepicker-touch-p</td>
                            <td>Datepicker element in touch p mode.</td>
                        </tr>
                        <tr>
                            <td>p-datepicker-calendar</td>
                            <td>Table containing dates of a month.</td>
                        </tr>
                        <tr>
                            <td>p-datepicker-current-day</td>
                            <td>Cell of selected date.</td>
                        </tr>
                        <tr>
                            <td>p-datepicker-today</td>
                            <td>Cell of today's date.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/calendar" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-calendar-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Popup&lt;/h5&gt;
&lt;div class="p-fluid p-grid p-formgrid"&gt;
    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="basic"&gt;Basic&lt;/label&gt;
        &lt;p-calendar inputId="basic" [(ngModel)]="date1"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="spanish"&gt;Spanish&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="date2" [locale]="es" dateFormat="dd/mm/yy" inputId="spanish"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="icon"&gt;Icon&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="date3" [showIcon]="true" inputId="icon"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="min-max"&gt;Min-Max&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="date4" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true" inputId="min-max"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="disabledays"&gt;Disable Days&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="date5" [disabledDates]="invalidDates" [disabledDays]="[0,6]" [readonlyInput]="true" inputId="disabledays"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="navigators"&gt;Navigators&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" inputId="navigators"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="time"&gt;Time&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="date7" [showTime]="true" inputId="time"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="timeonly"&gt;Time Only&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="date8" [timeOnly]="true" inputId="timeonly"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="multiple"&gt;Multiple&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="dates" selectionMode="multiple" [readonlyInput]="true" inputId="multiple"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="range"&gt;Range&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="rangeDates" selectionMode="range" [readonlyInput]="true" inputId="range"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="buttonbar"&gt;Button Bar&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="date9" showButtonBar="true" inputId="buttonbar"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="template"&gt;Date Template&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="date10" inputId="template"&gt;
            &lt;ng-template pTemplate="date" let-date&gt;
                &lt;span [ngStyle]="&#123;textDecoration: (date.day &lt; 21 && date.day &gt; 10) ? 'line-through' : 'inherit'&#125;"&gt;&#123;&#123;date.day&#125;&#125;&lt;/span&gt;
            &lt;/ng-template&gt;
        &lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="multiplemonths"&gt;Multiple Months&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="date11" [numberOfMonths]="3" inputId="multiplemonths"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="monthpicker"&gt;Month Picker&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="date12" view="month" dateFormat="mm/yy" [yearNavigator]="true" yearRange="2000:2030" [readonlyInput]="true" inputId="monthpicker"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;

    &lt;div class="p-field p-col-12 p-md-4"&gt;
        &lt;label for="touchui"&gt;Touch UI&lt;/label&gt;
        &lt;p-calendar [(ngModel)]="date13" [touchUI]="true" [readonlyInput]="true" inputId="touchui"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Inline&lt;/h5&gt;
&lt;p-calendar [(ngModel)]="date14" [inline]="true" [showWeek]="true"&gt;&lt;/p-calendar&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class CalendarDemo &#123;

    date1: Date;

    date2: Date;

    date3: Date;

    date4: Date;

    date5: Date;

    date6: Date;

    date7: Date;

    date8: Date;

    date9: Date;

    date10: Date;

    date11: Date;

    date12: Date;

    date13: Date;

    date14: Date;
    
    dates: Date[];

    rangeDates: Date[];

    minDate: Date;

    maxDate: Date;

    es: any;

    invalidDates: Array&lt;Date&gt;

    ngOnInit() &#123;
        this.es = &#123;
            firstDayOfWeek: 1,
            dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ],
            dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ],
            dayNamesMin: [ "D","L","M","X","J","V","S" ],
            monthNames: [ "enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre" ],
            monthNamesShort: [ "ene","feb","mar","abr","may","jun","jul","ago","sep","oct","nov","dic" ],
            today: 'Hoy',
            clear: 'Borrar'
        &#125;

        let today = new Date();
        let month = today.getMonth();
        let year = today.getFullYear();
        let prevMonth = (month === 0) ? 11 : month -1;
        let prevYear = (prevMonth === 11) ? year - 1 : year;
        let nextMonth = (month === 11) ? 0 : month + 1;
        let nextYear = (nextMonth === 0) ? year + 1 : year;
        this.minDate = new Date();
        this.minDate.setMonth(prevMonth);
        this.minDate.setFullYear(prevYear);
        this.maxDate = new Date();
        this.maxDate.setMonth(nextMonth);
        this.maxDate.setFullYear(nextYear);

        let invalidDate = new Date();
        invalidDate.setDate(today.getDate() - 1);
        this.invalidDates = [today,invalidDate];
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-calendar-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
